<template>
  <Dialog v-model="dialogVisible" title="指定" width="500" align-center>
    <el-form
      @submit.prevent
      label-width="120px"
      :model="formData.data"
      ref="formRef"
      :rules="rules"
    >
      <el-form-item label="归属机构:" prop="deptId">
        <el-cascader
          style="width: 100%"
          ref="deptCascader"
          v-model="formData.data.deptId"
          placeholder="请选择归属机构"
          :props="formData.cascaderProps"
          :options="formData.deptList"
          filterable
          clearable
          value-on-clear="0"
          :filter-method="sysFilterMethod"
        />
      </el-form-item>
      <el-form-item label="归属系统:" prop="sysId">
        <el-cascader
          style="width: 100%"
          ref="systemCascader"
          v-model="formData.data.sysId"
          placeholder="请选择归属系统"
          :props="formData.systemCascaderProps"
          :options="formData.systemList"
          filterable
          clearable
          value-on-clear=""
          :filter-method="sysFilterMethod"
        />
      </el-form-item>

      <el-form-item label="数据标准" prop="template">
        <el-select
          v-model="formData.data.template"
          clearable
          placeholder="请选择数据标准"
          value-on-clear=""
        >
          <el-option
            v-for="item in standardList"
            :key="item.id"
            :label="item.dataStandardName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" @click="submit" :disabled="formLoading">确定</el-button>
      <el-button @click="closeDialog">取 消</el-button>
    </template>
  </Dialog>
</template>
<script lang="ts" setup>
import { sysFilterMethod } from '@/utils/selectFilter'
import { getSimpleSystemList } from '@/api/asset/taskManage'
import { getSimpleDeptList } from '@/api/system/dept'
import { handleTree } from '@/utils/tree'
import type { FormInstance } from 'element-plus'
import * as StandardsApi from '@/api/dataStandards/standards'

const dialogVisible = ref(false) // 弹窗的是否展示
const formLoading = ref(false)
const standardList = ref([])

const formRef = ref<FormInstance>()

const formData = reactive({
  data: {
    deptId: '0',
    sysId: '',
    template: '',
    type: ''
  },
  systemList: [] as any[],
  deptList: [] as any[],

  cascaderProps: {
    checkStrictly: true,
    label: 'name',
    value: 'id',
    children: 'children',
    emitPath: false // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
  },
  systemCascaderProps: {
    checkStrictly: true,
    label: 'value',
    value: 'id',
    children: 'children',
    emitPath: false
  }
})

const isRequired = computed(() => {
  return formData.data.deptId == '0' && !formData.data.sysId
})

const rules = computed(() => ({
  deptId: [{ required: isRequired.value, message: '归属机构不能为空', trigger: 'change' }],
  sysId: [{ required: isRequired.value, message: '归属系统不能为空', trigger: 'change' }],
  type: [{ required: true, message: '请选择标准类型', trigger: ['blur', 'change'] }],
  template: [{ required: true, message: '请选择数据标准', trigger: ['blur', 'change'] }]
}))

//获取数据标准
const getStandList = async () => {
  const { data } = await StandardsApi.dataStandardsPage({
    page: 1,
    pageSize: 10000,
    type: 0,
    status: '1'
  })
  standardList.value = data
}

/** 打开弹窗 */
const open = async () => {
  dialogVisible.value = true
  getSystemList()
  getDeptList()
}

async function submit() {
  await formRef.value?.validate()
  const data = toRaw(formData.data)
  emit('success', data)
  //
  // if (formType.value === 'create') {
  //   await createKeyword(data)
  //   message.success(t('common.createSuccess'))
  // } else {
  //   await updateKeyword(data)
  //   message.success(t('common.updateSuccess'))
  // }
  // closeDialog()
  // // 发送操作成功的事件
}

defineExpose({ open, close: closeDialog, setBtnStatus }) // 提供 open 方法，用于打开弹窗

const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调

async function getDeptList() {
  const data = await getSimpleDeptList()
  formData.deptList = data
}

async function getSystemList() {
  const data = await getSimpleSystemList({})
  formData.systemList = handleTree(data, 'id', 'pid')
}

function closeDialog() {
  dialogVisible.value = false
}

function setBtnStatus(status: boolean) {
  formLoading.value = status
}

/** 重置表单 */
const resetForm = () => {
  formRef.value?.resetFields()
}

watch(dialogVisible, (show) => {
  !show && resetForm()
})
onMounted(() => {
  getStandList()
})
</script>
<style lang="scss" scoped></style>
